<template>
    <div>
        <header>
            <div class="show-img">
                <van-image round width="50px" height="50px" :src="src" />
            </div>
            <div class="upload-img"><van-uploader :after-read="afterRead" /></div>
            <router-link to="/login">

                <span class="login-text">账号: <span> {{ username }}</span></span>

            </router-link>

        </header>
        <section class="orders">
            <div class="orders-header">
                <span class="orders-title">我的订单</span>
                <span class="orders-link">全部订单 ›</span>
            </div>
            <div class="orders-icons">
                <div class="order-icon">
                    <img src="../assets/img/dfk.png" alt="待付款" class="order-icon-img" />
                    <div>待付款</div>
                </div>
                <div class="order-icon">
                    <img src="../assets/img/dsh.png" alt="待收货" class="order-icon-img" />
                    <div>待收货</div>
                </div>
                <div class="order-icon">
                    <img src="../assets/img/thx.png" alt="退换修" class="order-icon-img" />
                    <div>退换修</div>
                </div>
            </div>
        </section>
        <nav>
            <div class="menu-item">
                <img src="../assets/img/hyzx.png" class="menu-icon" />
                <span class="menu-text">会员中心</span>
                <span class="menu-arrow"></span>
            </div>
            <div class="menu-item">
                <img src="../assets/img/yh.png" class="menu-icon" />
                <span class="menu-text">我的优惠</span>
                <span class="menu-arrow"></span>
            </div>
            <div class="menu-item">
                <img src="../assets/img/fwzx.png" class="menu-icon" />
                <span class="menu-text">服务中心</span>
                <span class="menu-arrow"></span>
            </div>
            <div class="menu-item">
                <img src="../assets/img/F-gray.png" class="menu-icon" />
                <span class="menu-text">我的F码</span>
                <span class="menu-arrow"></span>
            </div>
            <div class="menu-item">
                <img src="../assets/img/lw.png" class="menu-icon" />
                <span class="menu-text">礼物码兑换</span>
                <span class="menu-arrow"></span>
            </div>
            <div class="menu-item">
                <img src="../assets/img/sz.png" class="menu-icon" />
                <span class="menu-text">设置</span>
                <span class="menu-arrow"></span>
            </div>
        </nav>
        <footer>
            <div class="van-button" type="warning" @click="logout">退出登录</div>
        </footer>
    </div>
</template>

<script>
import { Dialog } from 'vant';
// 定义数组存储所有用户头像
let userimgs = {};
let imgstr = localStorage.getItem("SKY_USERIMG");
if (imgstr) {
    userimgs = JSON.parse(imgstr);
}

export default {
    data() {
        return {
            menuItems: [
                { text: '', imgSrc: '' },
                { text: '', imgSrc: 'https://picsum.photos/24?random=2' },
                { text: '', imgSrc: 'https://picsum.photos/24?random=3' },
                { text: '', imgSrc: 'https://picsum.photos/24?random=5' },
                { text: '', imgSrc: 'https://picsum.photos/24?random=6' },
                { text: '', imgSrc: 'https://picsum.photos/24?random=7' }
            ],
            username: '账号',
            src: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        };
    },
    created() {
        // 获取用户名
        this.username = localStorage.getItem("SKY_USERNAME");
        console.log(this.username);

        //  获取用户身份
        let token = localStorage.getItem("AUTO_TOKEN");
        //  判断是否登录
        if (token) {
            // 判断是否有存在用户头像
            if (userimgs[token] && userimgs[token].src) {
                // 有，那就赋值 （刷新这个头像就持久存储在本地的）
                this.src = userimgs[token].src;
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // 获取token
        let token = localStorage.getItem("AUTO_TOKEN");
        // 判断是有值
        if (token) {
            next(true);
        }
        else {
            Dialog.confirm({
                confirmButtonColor: "#0c8bf3",
                title: '您还没登录',
                message: '要跳转到登录页面吗?',
            })
                .then(() => {
                    // on confirm （确定）
                    next({ path: '/login' })
                })
                .catch(() => {
                    // on cancel （取消）
                    next(false);
                });
        }
    },
    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // console.log(file);
            if (file) {
                // 把base64格式的图片字符串赋值给src变量
                this.src = file.content;
                // 获取用户身份
                let token = localStorage.getItem("AUTO_TOKEN");
                if (token) {
                    // 该用户头像是否存在
                    if (userimgs[token]) {
                        // 是 (有缓存头像)
                        userimgs[token].src = file.content;
                    }
                    else {
                        // 否
                        // 对象
                        userimgs[token] = {};
                        userimgs[token].src = file.content;
                    }
                    localStorage.setItem("SKY_USERIMG", JSON.stringify(userimgs));
                }
            }

        },
        logout() {
            // 先给用户做弹窗反馈
            Dialog.confirm({
                confirmButtonColor: "#0c8bf3",
                message: '您要退出登录吗',
                title: "提示",
            })
                .then(() => {
                    // on close
                    localStorage.removeItem("AUTO_TOKEN");
                    setTimeout(() => {
                        // 跳转登录页
                        this.$router.push({ path: '/login' })
                    }, 150)
                })
                .catch(
                    err => {
                        console.log(err);
                    }
                )
        }
    }
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;

}


header {
    width: 100%;
    height: 80px;
    background-color: red;
    color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;

    .upload-img {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        opacity: 0;
        z-index: 10


    }

    a {



        .login-text {
            font-size: 18px;
            color: #fff;
            margin-left: 50px;
        }
    }
}

.orders {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;

    .orders-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

        .orders-title {
            font-size: 16px;
            font-weight: bold;
        }

        .orders-link {
            color: #999;
            font-size: 14px;
        }
    }

    .orders-icons {
        display: flex;
        justify-content: space-around;
        font-size: 20px;

        .order-icon {
            text-align: center;

            .order-icon-img {
                width: 24px;
                height: 24px;
                margin-bottom: 5px;
            }
        }
    }
}

nav {
    height: 370px;

    .menu-item {
        font-size: 20px;
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #e0e0e0;

        .menu-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .menu-text {
            flex-grow: 1;
        }

        .menu-arrow {
            &::after {
                content: "›";
                color: #999;
            }
        }
    }
}

footer {
    width: 100%;
    text-align: center;

    .van-button{
        width: 100px;
        height: 40px;
        line-height: 40px;
        margin-top: 20px;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        background-color: red;
        margin-bottom: 20px;
    }
}
</style>
